<template>
  <div class="all">
    <div class="bg" v-if="isShow">
      <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>

      <LImage class="img-moon" :src="Config.img('2201_moon.png')"></LImage>
      <LImage class="img-moonx" :src="Config.img('2201_moonx.png')"></LImage>
      <LImage class="img-spot-right" :src="Config.img('2201_right_spot.png')"></LImage>
      <LImage class="img-spot-left" :src="Config.img('2201_left_spot.png')"></LImage>
      <LImage class="img-bottom" :src="Config.img('2201_page10_bottom1.png')"></LImage>

      <div class="height120"></div>
      <div class="row jbetween">
        <LImage class="img-text" :src="Config.img('2201_page10_text.png')"></LImage>
        <text class="font30 text1">{{'ID:'+uuid}}</text>
      </div>

      <div class="height30"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text1">{{'你的关键词'}}</span>
        <div class="widht20"></div>
        <span class="font52 text-yellow">{{'#'+tag+'#'}}</span>
      </richtext>

      <div class="height30"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text-yellow">{{text1}}</span>
        <span class="font30 text1">{{'（'+text2+'）'}}</span>
      </richtext>

      <div class="line"></div>
      <richtext class="richtext" v-if="usdtIncome < 0">
        <span class="font30 text1">{{'今年没发挥好，被'}}</span>
        <span class="font52 text-yellow">{{ranking}}</span>
        <span class="font30 text-yellow">{{'%'}}</span>
        <span class="font30 text1">{{'的小伙伴超过了'}}</span>
      </richtext>
      <richtext class="richtext" v-else>
        <span class="font30 text1">{{'今年没发挥好，才挣了'}}</span>
        <span class="font30 text-yellow">{{'$'}}</span>
        <span class="font52 text-yellow">{{usdtIncome}}</span>
        <span class="font30 text1">{{'，只超过了'}}</span>
        <span class="font52 text-yellow">{{ranking}}</span>
        <span class="font30 text-yellow">{{'%'}}</span>
        <span class="font30 text1">{{'的小伙伴'}}</span>
      </richtext>

      <div class="line"></div>
      <richtext class="richtext" :style="{'background-color':stylek}">
        <span class="font30 text1">{{'经历了2021年的行情，你学会了—'}}</span>
        <span class="font52 text-yellow">{{studyTag1}}</span>
      </richtext>
      <div class="height10"></div>
      <text class="font30 text-yellow">{{studyTag2}}</text>

      
      <div class="all"></div>
      <div class="qr-code-box">
         <WeexQRCode v-if="codeUrl" class="qr-code" :code="codeUrl"></WeexQRCode>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .text1 {
    color: #E5F3FF;
  }
  .line {
    height: 1px;
    background-color:#0065BE;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    width: 750px;
    min-height: 1220px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .img-text {
    width: 142;
    height: 94;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .img-stars {
    width: 719px;
    height: 766px;
  }
  .img-moon {
    position: absolute;
    top: 20;
    right: -100px;
    width: 340px;
    height: 340px;
  }
  .img-moonx {
    position: absolute;
    left: -300px;
    bottom: 100px;
    width: 600px;
    height: 600px;
  }
  .img-spot-left {
    position: absolute;
    bottom: 200;
    left: 40;

    width: 88px;
    height: 93px;
  }
  .qr-code-box {
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    width: 152px;
    height: 152px;
    border-radius: 10px;
    padding: 10px;
    margin-left: 60px;
    margin-bottom: 50px;
  }
  .qr-code{
    width:140px;
    height:140px;
  }

  .img-spot-right {
    position: absolute;
    bottom: 288;
    left: 300;
    
    width: 147px;
    height: 155px;
  }
  .img-log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 760px;
  }
  .img-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 247px;
  }
  .cell {
    flex-direction: row;
    margin-bottom: 20px;
  }
  .but {
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top, #FF7200, #FFE956);
    width: 484px;
    height: 100px;
    border-radius: 50px;

    margin-bottom: 80px;
  }
  .height120 {
    height: 120px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .mb-10 {
    margin-bottom: -10px;
  }
  .mb-2 {
    margin-bottom: -4px;
  }
  .text-yellow {
    color: #F6CF54;
  }
</style>

<script>
import labels from "@/active2201/labels"; 


//功能
import jnavigator from "@/_js/navigator"; 
import jconfig from "@/_js/config"; 
import jmodal from "@/_js/modal"; 
import jmath from "@/_js/math"; 
import jtime from "@/_js/time"; 

const weexFunction = weex.requireModule("WeexFunction");
export default {

  components: {
    labels
  },

  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportEighthJson:undefined,
      codeUrl: jconfig.inviteUrl,

      uuid:'', //UUID
      tag:'', //关键词
      text1:'',
      text2:'',
      usdtIncome:'', //赚取金额
      ranking:'', //排行
      studyTag1:'', //学费了
      studyTag2:'', //学费了

      isShow:false,
    }
  },

  mounted(){
    var param = weex.config;
    this.data = param.data;
    
    //uuid
    this.uuid = this.data.reportFirstJson.uuid;

    //标签 启动合约数量大于0取合约标签，否则取现货标签
    this.tag = this.data.reportThirdJson.contractNumber>0 ? 
    this.data.reportNinthJson.contractTag : 
    this.data.reportNinthJson.spotTag;

    //文案
    var texts = [];
    for (var key in this.data.shareTag) {
      if (Object.hasOwnProperty.call(this.data.shareTag, key)) {
        var text = this.data.shareTag[key];
        texts.push(text);
      }
    }
    var length = texts.length - 1;
    var index = Math.round(Math.random()*length)
    var text = texts[index];
    texts = text.split('_');
    this.text1 = texts[0];
    this.text2 = texts[1];

    
    



    //赚取
    this.usdtIncome = this.data.reportThirdJson.usdtIncome;

    //排行
    if (this.usdtIncome < 0) {
      var value = jmath.chu(this.data.reportTenJson.rank, this.data.reportTenJson.totalNum);
      this.ranking = jmath.cheng(value, '100', '2', '2');
    } else {
      var value = jmath.jian(this.data.reportTenJson.totalNum, this.data.reportTenJson.rank);
      value = jmath.chu(value, this.data.reportTenJson.totalNum);
      this.ranking = jmath.cheng(value, '100', '2', '2');
    }

    var studyTag = this.data.reportNinthJson.studyTag;
    var tags = studyTag.split("：");
    this.studyTag1 = tags[0];
    var studyTag2 = tags[1];
    if (studyTag2 == '前尘黄褂刀满伤，今夕电驴平爆仓') {
      studyTag2 = '前尘黄褂刀满伤，今夕电驴频爆仓';
    }
    this.studyTag2 = studyTag2;


    this.isShow = true;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
  },

  methods:{
  }
}
</script>
